<template>
  <Popover trigger="click">
    <template #title>
      <h5 class="popover-title">资质轨迹</h5>
    </template>
    <template #content>
      <Empty v-if="!record.aptChanges" :image="simpleImage" description="暂无轨迹"></Empty>
      <div class="trajectory">
        <p v-for="item in record.aptChanges">
          <span>{{ parseTime(item.certApproveDate) }}</span>
          <span>{{ item.certRemark }}</span>
        </p>
      </div>
    </template>
    <span class="blue pointer" >{{record.certName}}</span>
  </Popover>
</template>
<script lang="ts" >
import {defineComponent, onMounted, PropType, ref, toRefs} from "vue";
import { Popover , Empty  } from 'ant-design-vue';
import { Item , getQualChangeApi } from '/@/api/company';
import { parseTime } from '/@/utils';

interface RecordBaseModel {
  certId:string;
  certName:string;
  certNo:string;
  certPrintId:string;
  certState:string;
  certStateReason	:string;
  certType:string;
  issueDate:number;
  issueUnitName:string;
  validEdate:number;
  aptChanges:any;
}

export default defineComponent({
  name: 'trajectory',
  props: {
    record:{
      type: Object as PropType<RecordBaseModel>,
      default: {}
    }
  },
  components:{ Popover , Empty },
  setup(props) {
    const { record } = toRefs(props);
    const locus = ref<Item[]>([])
    const isEmpty =ref<Boolean>(false)
    const getQualChange = certPrintId =>{
      getQualChangeApi({ certPrintId : certPrintId} ).then( data =>{
        if(data.length){
          isEmpty.value = false;
          locus.value = data
        }else {
          isEmpty.value = true
        }
      })
    }
    //let certName = record.value.certPrintId;
    const init = () => {
      //getQualChange(certName);
    }
    onMounted(init)
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,isEmpty,
      locus , parseTime  ,record , getQualChange
    };
  }
})
</script>

<style lang="less" scoped>
  .trajectory{
    >p{
      position: relative;

      span{
        display: inline-block;
        vertical-align: top;

        &:first-child{
          width: 72px;
          margin-right: 20px;
        }

        &:nth-child(2){
          max-width: 300px;
        }
      }

      &::before{
        position: absolute;
        top: 8px;
        left: 78px;
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #D8D8D8;
        border-radius: 50%;
        content: '';
      }

      &::after{
        position: absolute;
        top: 15px;
        left: 81px;
        display: inline-block;
        width: 1px;
        height: calc(100% + 5px);
        background: #EDEFF2;
        content: '';
      }

      &:last-child::after{
        display: none;
      }
    }

  }

  .popover-title{
    position: relative;
    padding: 5px 0 5px 5px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;

    &::before{
      position: absolute;
      top: 9px;
      left: -5px;
      display: inline-block;
      width: 3px;
      height: 14px;
      border-left: 3px solid @blue;
      content: '';
    }


  }
</style>

